<template>
<div>
  <div>
    <el-page-header @back="goBack" content="轮播图管理">
    </el-page-header>
    <el-button type="primary" size="small" @click="dialogFormVisible=true;title='添加轮播图'">添加</el-button>
  </div>
  <el-table
    :data="bannerlist" 
    height="550"
    row-key="id"
    border
    stripe>
    <el-table-column label="轮播图标题"
      prop="title"
      width="220">
    </el-table-column>
    <el-table-column label="图片"
      width="220">
      <template slot-scope="item">
        <div>
          <img v-if="item.row.img" :src="item.row.img" style="width: 100px">
        </div>
      </template>
    </el-table-column>
    <el-table-column label="状态"
      prop="status"
      width="320">
    </el-table-column>
    <el-table-column label="操作"
      fixed="right"
      width="220">
      <template slot-scope="item">
        <el-button 
          @click.native.prevent="editBanner(item.row.id)"
          type="primary"
          icon="el-icon-edit"
          size="small">
        </el-button>

        <el-button
          @click.native.prevent="deleteRow(item.row.id)"
          type="danger"
          icon="el-icon-delete"
          size="small">
        </el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog :title="title" :visible.sync="dialogFormVisible" @close="resetForm">
    <el-form :model="form" ref="form">
      <el-form-item label="标题" :label-width="formLabelWidth">
        <el-input v-model="form.title" autocomplete="off"></el-input>
      </el-form-item>

      <el-form-item label="图片" :label-width="formLabelWidth">        
        <el-upload           
          action="#"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-change="handleChange"
          :auto-upload="false"
          :file-list="filelist"> 
          <i class="el-icon-plus"></i>  
        </el-upload>
      </el-form-item>
  
      <el-form-item label="状态" :label-width="formLabelWidth">
        <el-switch
          v-model="form.status"
          :active-value="1"
          :inactive-value="2">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible=false">取 消</el-button>
      <el-button type="primary" @click.native.prevent="addBanner">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<script>
// 引入辅助性函数
import { mapGetters, mapActions } from 'vuex'

// 引入接口
import { bannerAdd, bannerDelete, bannerInfo, bannerEdit } from '../request/api.js'

export default {
  name: 'Banner',
  computed: {
    ...mapGetters({
      bannerlist: 'menu/getBanner'
    })
  },
  methods: {
    goBack() {
      this.$router.push('home')
    },
    resetForm() {
      this.dialogFormVisible = false
      this.form = {
        title: '',
        first_cateid: 1,
        second_cateid: 2,
        img: '',
        description: '',
        status: 1
      }
      this.filelist = []
    },
    handleChange(file, fileList) {
      this.form.img = file.raw
    },
    handleRemove(file, fileList) {  
      console.log(this.form)
    },
    addBanner() {
      this.dialogFormVisible=false
      //this.$refs.form.validate((val) => {
      //  if(val) {
          let file = new FormData()
          for (let i in this.form) {
            file.append(i,this.form[i])
          }
          if(this.isAdd){
            // 调用添加接口 
            bannerAdd(file).then(res => {
              if(res.data.code == 200) {
                this.$message.success(res.data.msg)
                // 添加成功后重新调用列表接口
                this.getBanner()
              } else {
                this.$message.error(res.data.msg)
              }
              this.resetForm('form')
            })
          } else {
            bannerEdit(file).then((res) => {
              if(res.data.code == 200) {
                this.$message.success(res.data.msg)
                // 重新调用列表接口
                this.getBanner()
              } else {
                this.$message.error(res.data.msg)
              }
                this.resetForm('form')
            })
          }
    //    } else {
    //        console.log('失败')
    //    }
    //  })
    },
    editBanner(id) {
      this.dialogFormVisible = true
      this.title = '编辑轮播图'
      this.isAdd = false
      bannerInfo({ id }).then(res => {
        this.form = {id,...res.data.list}
        this.filelist = [{url:res.data.list.img}]
      })
    },
    deleteRow(id) {
      bannerDelete({ id }).then(res => {
        if(res.data.code == 200) {
          this.$message.success(res.data.msg)
          this.getBanner()
        } else {
          this.$message.error(res.data.msg)
        }
      })  
    },
    ...mapActions({
      getBanner: 'menu/getBannerAction'
    })
  },
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: '120px',
      title: '添加轮播图',
      isAdd: true,
      filelist: [],
      form: {
        title: '',
        first_cateid: 1,
        second_cateid: 2,
        img: '',
        description: '',
        status: 1
      }
    }
  },
  mounted() {
    this.getBanner()
  }
}
</script>

<style scoped>
</style>
